import React, { useState } from 'react';

export default function ComplexHookState() {

    const [friends, setFriends] = useState(['Chandler', 'Joey'])
    const [students, setStudents] = useState([
        {id: 100, name: '盖伦', age: 18},
        {id: 101, name: '金克斯', age: 19},
        {id: 102, name: '卡莉斯塔', age: 21},
    ])

    function incrementAgeWithIndex(index) {
        const newStudents = [...students];
        newStudents[index].age += 1;
        setStudents(newStudents);
    }

    return (
        <div>
            <h2>好友列表</h2>
            <ul>
                {
                   friends.map((item, index) => {
                       return <li key={item}>{item}</li>
                   })
                }
            </ul>
            <button onClick={e => setFriends([...friends, 'phoebe'])}>添加朋友</button>

            <button>学生列表</button>
            <ul>
                {
                    students.map((item, index) => {
                        return (
                            <li key={item.id}>
                                <span>姓名: {item.name} 年龄: {item.age}</span>
                                <button onClick = {e => incrementAgeWithIndex(index)}>age+1</button>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
}